<template>
    <teleport to="body">
        <vxe-modal :lock-view="false" :width="660" :height="500" v-model="state.addModal" resize :mask="true">
            <template #title>
                <div class="w100 h100 fsc mask_title">原因分析查看</div>
            </template>
            <template #default>
                <div class="detailsBox" v-for="item in detailsList">
                    <p class="timeBox"><span>{{ item.measureTime }}</span><span>分析人:{{item.analyst}}</span></p>
                    <div class="boxdesc">
                        <p>
                            <span>原因类型</span>
                            <span>{{ item.category }}</span>
                        </p>
                        <p>
                            <span>报警原因</span>
                            <span>{{ item.reason }}</span>
                        </p>
                        <p>
                            <span>处理措施</span>
                            <span>{{ item.measure }}</span>
                        </p>
                        <p>
                            <span>处理结果</span>
                            <span>{{ item.result }}</span>
                        </p>
                    </div>
                </div>
            </template>
        </vxe-modal>
    </teleport>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        detailsList: {
            type: Array,
            default: () => {
                return []
            }
        },
        detailsShow: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    })
    // 重点
    const state = reactive({
        addModal: props.detailsShow,
        inputvalue: undefined,
        templateName: undefined,
        breakpoints: {
            800: { //当屏幕宽度小于等于800
                rowPerView: 2,
            },
            500: { //当屏幕宽度小于等于500
                rowPerView: 2,
            }
        },
    })

    watchEffect(() => {
        state.addModal = props.detailsShow
    })
</script>
<style lang="scss" scoped>
    .detailsBox {
        padding: 16px;
        font-size: 16px;
        color: rgba(62, 70, 79, 1);

        .timeBox {
            position: relative;
            padding-left: 16px;

            &::before {
                position: absolute;
                top: 50%;
                left: -5px;
                transform: translateY(-50%);
                content: '';
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: rgba(91, 109, 128, 0.16);
            }

            span {
                &:nth-child(1) {
                    margin-right: 20px;
                }
            }
        }

        &:nth-child(1) {
            .timeBox {
                &::before {
                    background-color: rgba(68, 136, 255, 1);
                }
            }
        }

        p {
            padding: 0;
            margin: 0;
        }

        .boxdesc {
            margin-top: 10px;
            background-color: rgba(91, 109, 128, 0.08);
            padding: 16px;
            border-radius: 2px;
            position: relative;
            margin-left: 10px;

            &::before {
                position: absolute;
                content: '';
                width: 1px;
                background-color: rgba(91, 109, 128, 0.08);
                height: 100%;
                top: 0;
                left: -10px;
            }

            p {
                padding: 6px 0;
                display: flex;
                align-items: flex-start;

                span {
                    &:nth-child(1) {
                        color: rgba(62, 70, 79, .6);
                        margin-right: 10px;
                    }
                }
            }
        }
    }
</style>